<script setup lang="ts"></script>
<template>
  <div class="details-charge">
    <div class="topper">
      <div class="title">美化智充水口充电站</div>
      <div class="message">
        <ul class="message-details-footer-name">
          <li
            style="
              display: flex;
              flex-wrap: nowrap;
              justify-content: space-around;
              margin-bottom: 8rpx;
            "
          >
            <p style="flex: 2; color: #807c7c">订单号</p>
            <p style="flex: 8; word-break: break-all">001356451115115</p>
          </li>
          <li
            style="
              display: flex;
              flex-wrap: nowrap;
              justify-content: space-around;
              margin-bottom: 8rpx;
            "
          >
            <p style="flex: 2; color: #807c7c">充电桩</p>
            <p style="flex: 8; word-break: break-all">1号充电桩-左枪</p>
          </li>
          <li
            style="
              display: flex;
              flex-wrap: nowrap;
              justify-content: space-around;
              margin-bottom: 8rpx;
            "
          >
            <p style="flex: 2; color: #807c7c">充电电量</p>
            <p style="flex: 8; word-break: break-all">2.45度</p>
          </li>
          <li
            style="
              display: flex;
              flex-wrap: nowrap;
              justify-content: space-around;
              margin-bottom: 8rpx;
            "
          >
            <p style="flex: 2; color: #807c7c">开始时间</p>
            <p style="flex: 8; word-break: break-all">2019-12-06 20:11:23</p>
          </li>
          <li
            style="
              display: flex;
              flex-wrap: nowrap;
              justify-content: space-around;
              margin-bottom: 8rpx;
            "
          >
            <p style="flex: 2; color: #807c7c">结束时间</p>
            <p style="flex: 8; word-break: break-all">2019-12-06 20:15:36</p>
          </li>
          <li
            style="
              display: flex;
              flex-wrap: nowrap;
              justify-content: space-around;
              margin-bottom: 8rpx;
            "
          >
            <p style="flex: 2; color: #807c7c">充电时长</p>
            <p style="flex: 8; word-break: break-all">00:55:12</p>
          </li>
          <li
            style="
              display: flex;
              flex-wrap: nowrap;
              justify-content: space-around;
              margin-bottom: 8rpx;
            "
          >
            <p style="flex: 2; color: #807c7c">SOC</p>
            <p style="flex: 8; word-break: break-all">68.00%</p>
          </li>
          <li
            style="
              display: flex;
              flex-wrap: nowrap;
              justify-content: space-around;
              margin-bottom: 8rpx;
            "
          >
            <p style="flex: 2; color: #807c7c">动作</p>
            <p style="flex: 8; word-break: break-all">手动停止</p>
          </li>
          <li
            style="
              display: flex;
              flex-wrap: nowrap;
              justify-content: space-around;
              margin-bottom: 8rpx;
            "
          >
            <p style="flex: 2; color: #807c7c">车牌号</p>
            <p style="flex: 8; word-break: break-all">粤12VC654</p>
          </li>
        </ul>
      </div>
      <div class="link"></div>
      <div class="price">
        <div>充电总费用</div>
        <div style="color: #e73431">99元</div>
      </div>
    </div>
    <navigator class="footer" url="/subpkg/PaymentSuccess/PaymentSuccess">
      <button class="end">充电完成</button>
    </navigator>
  </div>
</template>
<style lang="less" scoped>
.details-charge {
  width: 100vw;
  height: 100vh;
  background-color: #e0e7f0;
  .topper {
    height: 770rpx;
    background-color: #fff;
    .title {
      font-weight: 700;
      padding-top: 80rpx;
      margin-left: 40rpx;
      margin-bottom: 40rpx;
    }
    .message {
      font-size: 28rpx;
      margin-left: 60rpx;
      margin-bottom: 60rpx;
    }
    .link {
      width: 690rpx;
      height: 1px;
      background-color: #e0e7f0;
      margin: auto;
    }
    .price {
      height: 140rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 80rpx;
      font-size: 28rpx;
      font-weight: 700;
    }
  }
  .footer {
    display: flex;
    justify-content: center;
    margin-top: 100rpx;
    .end {
      width: 600rpx;
      height: 98rpx;
      color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #1f1eff;
    }
  }
}
</style>
